<template>
  <div class="wrapper">
    <div class="registered">
      <h4>注册 XMall 账号</h4>
      <div class="content">
        <div class="InputArea clearfix">
          <input type="text" placeholder="账号" v-model="phone" />
          <input type="text" placeholder="密码" v-model="password" />
          <input type="text" placeholder="输入验证码" v-model="code" />
          <a href="#" @click="getCode">发送验证码</a>
        </div>
        <div class="statement clearfix">
          <input type="checkbox" class="check" v-model="agreement" />
          <span class="check-text">
            我已阅读并同意遵守
            <a href="#">法律声明</a>
            和
            <a href="#">隐私条款</a>
          </span>
        </div>
        <el-button
          class="registered-btn"
          type="text"
          @click="handlerRegister"
          showClose="false"
          :class="{
            active:
              phone.trim() && password.trim() && code && agreement
                ? true
                : false,
          }"
          >注册</el-button
        >
        <!-- <button class="registered-btn" @click="handlerRegister">注册</button> -->
        <div class="horizontalLine"></div>
        <div class="loginPrompt">
          <span
            >如果您已拥有 XMall 账号，则可在此
            <router-link to="/login">登陆</router-link>
            <!-- <a href="#">登陆</a> -->
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Registered",
  data() {
    return {
      phone: "",
      password: "",
      code: "",
      agreement: false,
      isReg: false,
    };
  },
  methods: {
    // 获取验证码
    async getCode() {
      const { phone, password } = this;
      if (phone.trim().length === 11 && password.trim()) {
        try {
          const result = await this.$store.dispatch("getCode");
          console.log(result);
          this.code = result.data.code;
        } catch (error) {
          alert("failed");
        }
      } else {
        alert("请填写正确手机号和密码");
      }
    },
    //点击注册
    handlerRegister() {
      const { phone, password, code, agreement } = this;
      if (
        phone.trim().length === 11 &&
        password.trim() &&
        code === "123456" &&
        agreement
      ) {
        const h = this.$createElement;
        this.$msgbox({
          title: "消息",
          message: h("p", null, [
            h("span", null, "注册成功,点击确定跳转至登录页面 "),
          ]),
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          beforeClose: (action, instance, done) => {
            if (action === "confirm") {
              this.$router.push("/login");
              done();
            } else {
              done();
            }
          },
        });
      } else {
        alert("请检查注册信息是否正确");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.wrapper {
  color: #999;
  height: 1000px;
  background: url(http://xmall.exrick.cn/static/images/bg_9b9dcb65ff.png) repeat;
  min-width: 630px;
  border: 1px solid transparent;
  .registered {
    box-shadow: 0 9px 30px -6px rgb(0 0 0 / 20%),
      0 18px 20px -10px rgb(0 0 0 / 4%), 0 18px 20px -10px rgb(0 0 0 / 4%),
      0 10px 20px -10px rgb(0 0 0 / 4%);
    width: 450px;
    height: 550px;
    background-color: #fff;
    margin: 90px auto 0;
    border-radius: 10px;
    h4 {
      color: #666;
      width: 100%;
      height: 61px;
      border-bottom: 1px solid #ccc;
      text-align: center;
      line-height: 61px;
      font-size: 20px;
    }
    .content {
      margin-top: 20px;
      padding: 0 40px 22px;
      .InputArea {
        input {
          box-sizing: border-box;
          width: 370px;
          height: 50px;
          padding: 10px 15px;
          border: 1px solid #ccc;
          margin-bottom: 15px;
          border-radius: 6px;
          outline: none;
        }
        a {
          float: right;
          margin-bottom: 15px;
        }
      }
      .statement {
        margin-bottom: 30px;
        .check {
          width: 18px;
          height: 18px;
          background-color: #fff;
          z-index: 1;
          border: 1px solid #bfcbd9;
          float: left;
        }
        .check-text {
          font-size: 14px;
          padding-left: 5px;
          color: #999;
          a {
            color: #5079d9;
          }
        }
      }
      .registered-btn {
        width: 100%;
        height: 50px;
        border: 1px solid #afafaf;
        background-color: #ccc;
        color: #fff;
        font-size: 18px;
        &.active {
          background-color: red;
        }
      }
      .horizontalLine {
        border-bottom: 1px solid #ccc;
        margin-top: 40px;
      }
      .loginPrompt {
        height: 48px;
        margin-top: 10px;
        line-height: 48px;
        text-align: center;
        span {
          color: #999;
        }
        a {
          color: #5079d9;
        }
      }
    }
  }
}
</style>
